<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>租赁管理</el-breadcrumb-item>
            <el-breadcrumb-item>代理门店</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <!-- 搜索与添加区域 -->
            <el-row :gutter="20">
                <el-col :span="7">
                    <el-input placeholder="请输入内容" v-model="query" clearable>
                        <el-button slot="append"  @click="serch" icon="el-icon-search"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addShop">添加门店</el-button>
                </el-col>
            </el-row>
            <el-table
                    :data="tableData"
                    stripe
                    border
                    style="width: 100%;">
                <el-table-column
                        fixed
                        prop="id"
                        label="id"
                >
                </el-table-column>
                <el-table-column
                        prop="shopName"
                        label="店铺名称"
                >
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="地址"
                >
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="状态"

                >
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status==0" >使用中</el-tag>
                        <el-tag type="danger" v-else>已停用</el-tag>
                        <el-switch
                                v-model="scope.row.status"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                :active-value="0"
                                :inactive-value="1"
                                @change="changeStatus(scope.row.id,scope.row.status)"
                        >
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="创建时间"
                >
                </el-table-column>

                <el-table-column
                        fixed="right"
                        label="操作"
                        align="center"
                >
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" @click="EditShop(scope.row.id)"  size="medium" circle></el-button>
                        <el-button type="danger" icon="el-icon-delete"  size="medium" @click="delShop(scope.row.id)" circle></el-button>
                        <!--<el-button type="success" icon="el-icon-s-tools" size="medium" @click=""  circle></el-button>-->
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>

            <!--修改弹框的 表单 -->
            <el-dialog
                    title="修改信息"
                    :visible.sync="EditDialogVisible"
                    @close="closeAll"
                    width="50%"
            >
                <el-form :model="EditFormData" status-icon :rules="EditFormShops" ref="EditRuleForm" label-width="140px" class="demo-ruleForm">
                    <el-form-item label="店铺名称" prop="shopName">
                        <el-input type="text" v-model="EditFormData.shopName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="店铺地址" prop="address">
                        <el-input type="text" v-model="EditFormData.address" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="省" prop="provinceId">
                        <el-select v-model="EditFormData.provinceId" filterable placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    v-if="item.parentid==0"
                                    :key="item.baseAreaid"
                                    :label="item.name"
                                    :value="item.baseAreaid">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="市" prop="cityId">
                        <el-select v-model="EditFormData.cityId" filterable placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    v-if="item.parentid==EditFormData.provinceId"
                                    :key="item.baseAreaid"
                                    :label="item.name"
                                    :value="item.baseAreaid">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="区" prop="areaId">
                        <el-select v-model="EditFormData.areaId" filterable placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    v-if="item.parentid==EditFormData.cityId"
                                    :key="item.baseAreaid"
                                    :label="item.name"
                                    :value="item.baseAreaid">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button @click="EditDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirmEditShop">确 定</el-button>
                    </el-form-item>
                </el-form>
                <!--<span slot="footer" class="dialog-footer">
                  <el-button @click="EditDialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="confirmEditBrand">确 定</el-button>
                </span>-->
            </el-dialog>


            <!--添加弹框的 表单 -->
            <el-dialog
                    title="添加信息"
                    :visible.sync="AddDialogVisible"
                    @close="closeAll"
                    width="50%"
            >
                <el-form :model="AddFormData" status-icon :rules="AddFormShops" ref="EditRuleForm" label-width="140px" class="demo-ruleForm">
                    <el-form-item label="店铺名称" prop="shopName">
                        <el-input type="text" v-model="AddFormData.shopName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="店铺地址" prop="address">
                        <el-input type="text" v-model="AddFormData.address" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="省" prop="provinceId">
                        <el-select v-model="AddFormData.provinceId" filterable placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    v-if="item.parentid==0"
                                    :key="item.baseAreaid"
                                    :label="item.name"
                                    :value="item.baseAreaid">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="市" prop="cityId">
                        <el-select v-model="AddFormData.cityId" filterable placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    v-if="item.parentid==AddFormData.provinceId"
                                    :key="item.baseAreaid"
                                    :label="item.name"
                                    :value="item.baseAreaid">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="区" prop="areaId">
                        <el-select v-model="AddFormData.areaId" filterable placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    v-if="item.parentid==AddFormData.cityId"
                                    :key="item.baseAreaid"
                                    :label="item.name"
                                    :value="item.baseAreaid">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button @click="AddDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirmAddShop">确 定</el-button>
                    </el-form-item>
                </el-form>
                <!--<span slot="footer" class="dialog-footer">
                  <el-button @click="AddDialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="confirmAddBrand">确 定</el-button>
                </span>-->
            </el-dialog>


        </el-card>
    </div>
</template>

<script>
    export default {
        name: "shop",
        data(){
            return{
                //下拉框
                options:[],
                //查询条件
                query:"",
                //当前页码
                currentPage: 1,
                //每页显示记录
                pageSize:5,
                //总条数
                total:0,
                //当前的记录数据
                tableData: [],
                //是否打开修改弹框 true 打开 false 关闭
                EditDialogVisible: false,
                //修改弹框表单的数据
                EditFormData:{},
                //修改弹框 表单的 规则
                EditFormShops:{
                    shopName:[
                        {required:true,message:"名称不能为空",trigger:"blur"}
                    ],
                    address:[
                        {required:true,message:"地址不能为空",trigger:"blur"}
                    ],
                    provinceId:[
                        {required:true,message:"省不能为空",trigger:"blur"}
                    ],
                    cityId:[
                        {required:true,message:"市不能为空",trigger:"blur"}
                    ],
                    areaId:[
                        {required:true,message:"区不能为空",trigger:"blur"}
                    ],

                },
                //是否打开 添加弹框
                AddDialogVisible: false,
                //添加表单的数据
                AddFormData:{},
                //添加表单的规则
                AddFormShops:{
                    shopName:[
                        {required:true,message:"名称不能为空",trigger:"blur"}
                    ],
                    address:[
                        {required:true,message:"地址不能为空",trigger:"blur"}
                    ],
                    provinceId:[
                        {required:true,message:"省不能为空",trigger:"blur"}
                    ],
                    cityId:[
                        {required:true,message:"市不能为空",trigger:"blur"}
                    ],
                    areaId:[
                        {required:true,message:"区不能为空",trigger:"blur"}
                    ],
                },


            }
        },
        //页面加载自动执行
        created() {
            this.initShopTable(this.currentPage,this.pageSize);
            this.base();
            //this.baseProince();
        },
        methods: {
            //下拉框
            base(){
                var that = this;
                this.$http.get(`/hire/baseArea/getAllBase`).then(function (res) {
                    if (res.data.code == 200) {
                        that.options = res.data.data;
                    } else {
                        that.$message.error("信息加载失败");
                    }
                })
            },

            //修改每页几条的方法
            handleSizeChange(val) {
                this.pageSize = val;
                this.initShopTable(this.currentPage, this.pageSize);
            },
            //修改页数的方法
            handleCurrentChange(val) {
                this.currentPage = val;
                this.initShopTable(this.currentPage, this.pageSize);
            },
            //模糊查询按钮的方法
            serch() {
                this.currentPage = 1;
                this.pageSize = 5;
                this.initShopTable(this.currentPage, this.pageSize);
            },
            //初始化表格的方法
            initShopTable(currentPage, pageSize) {
                var that = this;
                this.$http.post(`/hire/shop/findShopByPage/${currentPage}/${pageSize}?query=${this.query}`).then(function (res) {
                    if (res.data.code == 200) {
                        that.tableData = res.data.data.records;
                        that.total = res.data.data.total;
                    } else {
                        that.$message.error("信息加载失败");
                    }
                })
            },
            //修改弹框回显的方法
            EditShop(id) {
                this.EditDialogVisible = true;
                //console.log(userId);
                var that = this;
                this.$http.get(`/hire/shop/getShopById/${id}`).then(function (res) {
                    that.EditFormData = res.data.data;
                })
            },

            closeAll(){
                this.$refs.EditRuleForm.resetFields();
            },
            //提交修改弹框的方法
            confirmEditShop() {
                var that = this;
                this.$refs['EditRuleForm'].validate((valid) => {
                    if (valid) {
                        that.$http.put("/hire/shop/updateShop", this.EditFormData).then(function (res) {
                            if (res.data.code == 200) {
                                that.$message.success("修改成功");
                                that.EditDialogVisible = false;
                                that.initShopTable(that.currentPage, that.pageSize);
                            } else {
                                that.$message.error("修改失败");
                            }
                        })
                    }
                })
            },

            //修改状态的方法
            changeStatus(id, status) {
                var that = this;
                this.$http.put(`/hire/shop/updateStatusByShopId/${id}/${status}`).then(function (res) {
                    if (res.data.code == 200) {
                        that.$message.success(res.data.msg);
                        that.initShopTable(that.currentPage, that.pageSize);
                    } else {
                        that.$message.error(res.data.msg);
                        that.initShopTable(that.currentPage, that.pageSize);
                    }
                })
            },

            //添加按钮的弹框的方法
            addShop() {
                this.AddDialogVisible = true;
            },
            //提交添加表单的方法
            confirmAddShop() {
                //console.log(this.AddFormData);
                var that = this;
                this.$refs['EditRuleForm'].validate((valid) => {
                    if (valid) {
                        this.$http.post("/hire/shop/addShop", this.AddFormData).then(function (res) {
                            if (res.data.code == 200) {
                                //console.log(res);
                                that.$message.success(res.data.msg);
                                that.AddDialogVisible = false;
                                that.initShopTable(that.currentPage, that.pageSize);
                            } else {
                                that.$message.error(res.data.msg);
                            }
                        })
                    }
                })
            },
            //删除品牌
            delShop(id){
                var that=this;

                this.$confirm('是否删除该类型?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.get(`/hire/shop/delById/${id}`).then(function(resp){
                        if (resp.data.code == 200) {
                            //console.log(res);
                            if (that.total%that.pageSize==1){
                                that.currentPage--;
                            }else {
                                that.currentPage = that.currentPage;
                            }
                            that.$message.success(resp.data.msg);
                            that.initShopTable(that.currentPage, that.pageSize);
                        } else {
                            that.$message.error(resp.data.msg);
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
        }
    }
</script>

<style scoped>

</style>